<template>
    <div class="box">
        <div class="box-center">
            <div class="head">
                <div class="head-name">租户名称</div>
                <div class="head-date">
                    <div class="head-date-text"> {{ today }}</div>
                    <img src="../../assets/largeScreen/fullscreen.png" alt="" class="fullscreen-img">
                </div>
            </div>
            <div class="bodys">
                <el-row>
                    <el-col :span="6">
                        <div class="body-left">
                            <div class="today-overview">
                                <div class="today-overview-haed">
                                    <div class="img-box"><img src="../../assets/largeScreen/circle@2x.png" alt=""
                                            class="today-img"></div>
                                    <el-row>
                                        <el-col :span="8">
                                            <div class="today-overview-haed-txt" style="min-width:132px">今日出租概况</div>
                                        </el-col>
                                        <el-col :span="16">
                                            <div class="router-box"><img src="../../assets/largeScreen/route@2x.png" alt=""
                                                    class="router-img"></div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="today-overview-body">
                                    <el-row style="width:100%">
                                        <el-col :span="8">
                                            <div class="today-overview-body-left">
                                                <div class="circularRotation-box"><img
                                                        src="../../assets/largeScreen/circularRotation.png" alt=""
                                                        class="circularRotation-img" ref="imgRotate"></div>
                                                <div class="circularRotation-value">33.3%</div>
                                                <div class="circularRotation-txt">出租率</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="16">
                                            <div class="today-overview-body-right">
                                                <div class="today-overview-body-top">
                                                    <div><img src="../../assets/largeScreen/toDayOrder.png" alt=""
                                                            class="lease-img"></div>
                                                    <div class="lease-box">
                                                        <div class="lease-box-tit">
                                                            <span class="lease-box-tit-tet">出租车辆</span>
                                                            <span class="lease-box-tit-value">100</span>
                                                        </div>
                                                        <div class="lease-box-body"><img
                                                                src="../../assets/largeScreen/leaseLine.png" alt=""
                                                                class="lease-box-body-img"></div>
                                                    </div>
                                                </div>
                                                <div class="today-overview-body-top">
                                                    <div><img src="../../assets/largeScreen/toDayCar.png" alt=""
                                                            class="lease-img"></div>
                                                    <div class="lease-box">
                                                        <div class="lease-box-tit">
                                                            <span class="lease-box-tit-tet car">闲置车辆</span>
                                                            <span class="lease-box-tit-value">100</span>
                                                        </div>
                                                        <div class="lease-box-body"><img
                                                                src="../../assets/largeScreen/idleLine.png" alt=""
                                                                class="lease-box-body-img"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>

                                    <div></div>
                                </div>
                            </div>
                            <div class="today-overview">
                                <div class="today-overview-haed">
                                    <div class="img-box"><img src="../../assets/largeScreen/circle@2x.png" alt=""
                                            class="today-img"></div>
                                    <el-row>
                                        <el-col :span="6">
                                            <div class="today-overview-haed-txt" style="min-width: 96px;">订单概况</div>
                                        </el-col>
                                        <el-col :span="18">
                                            <div class="router-box"><img src="../../assets/largeScreen/route@2x.png" alt=""
                                                    class="router-img"></div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="oeder-body">
                                    <div class="oeder-body-box" v-for="(item, index) in orderSummary" :key="index">
                                        <div class="oeder-body-img"><img src="../../assets/largeScreen/rderBox.png" alt=""
                                                class="rderBox-img"></div>
                                        <div class="oeder-body-num">{{ item.num }}</div>
                                        <div class="oeder-body-txt">{{ item.value }}</div>
                                    </div>

                                </div>
                            </div>
                            <div class="today-overview">
                                <div class="today-overview-haed">
                                    <div class="img-box"><img src="../../assets/largeScreen/circle@2x.png" alt=""
                                            class="today-img"></div>
                                    <el-row>
                                        <el-col :span="6">
                                            <div class="today-overview-haed-txt" style="min-width: 96px;">合同概况</div>
                                        </el-col>
                                        <el-col :span="18">
                                            <div class="router-box"><img src="../../assets/largeScreen/route@2x.png" alt=""
                                                    class="router-img"></div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="contract-body">
                                    <div v-for="(item, index) in contract" :key="index" class="contract-body-box">
                                        <img src="../../assets/largeScreen/contract.png" alt="" class="contract-img">
                                        <div class="contract-body-num">{{ item.text }}</div>
                                        <div class="contract-body-txt">{{ item.num }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="ailyRent-body">
                                <img :src="dailOrderImg" alt="" class="orderCardBorder-img">
                                <div class="ailyRent-body-head">
                                    <el-row style="width: 100%;">
                                        <el-col :span="12" class="ailyRent-body-head-left">
                                            <div @click="dailOrder(1)"
                                                :class="dailOrderType == 1 ? 'ailyRent-body-head-color' : ''">日租订单</div>
                                        </el-col>
                                        <el-col :span="12" class="ailyRent-body-head-right">
                                            <div @click="dailOrder(2)"
                                                :class="dailOrderType == 2 ? 'ailyRent-body-head-color' : ''">车务排班</div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <vue-seamless-scroll :data="listData" class="warp" :class-option="classOption">
                                    <div v-for="(item, index) in listData" :key="index" class="warp-li">
                                        <div :class="item.className ? 'dailyRentalOrder' : ''" class="warp-li-box"></div>
                                        <div class="warp-li-txt color1" v-if="item.text == '携程'">{{ item.text }}</div>
                                        <div class="warp-li-txt color3" v-if="item.text == '后台'">{{ item.text }}</div>
                                        <div class="warp-li-txt color2" v-if="item.text == '客户端'">{{ item.text }}</div>
                                        <div class="warp-li-txt color4" v-if="item.text == '管理端'">{{ item.text }}</div>
                                        <div class="warp-li-txt color5" v-if="item.text == '车务'">{{ item.text }}</div>
                                        <div class="warp-li-value" v-text="item.title + item.date"></div>
                                    </div>
                                </vue-seamless-scroll>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="body-center">
                            <div class="body-center-head">
                                <div class="body-center-head-box">
                                    <div class="head-box">
                                        <!-- <router-link target="_blank" tag="a" :to="{path:'/newPing'}"> -->
                                        <div style="margin-right:1vw"><img src="../../assets/largeScreen/receivable.png"
                                                alt="" class="receivable-img"></div>
                                        <div class="head-box-text">
                                            <div class="head-box-text-txt">今日运营收入已收(元)</div>
                                            <div class="head-box-text-num">23157</div>
                                        </div>
                                        <!-- </router-link> -->

                                    </div>
                                    <div class="head-box box2">
                                        <div class="head-box-text">
                                            <div class="head-box-text-txt">今日运营收入应收(元)</div>
                                            <div class="head-box-text-num">23157</div>
                                        </div>
                                        <div style="margin-left:1vw"><img src="../../assets/largeScreen/reciviedx.png"
                                                alt="" class="receivable-img"></div>

                                    </div>
                                </div>
                            </div>
                            <div class="publish-Region">
                                <!-- <div ref="mapCharts" class="chart"></div> -->
                                <ChinaMap style="height:52vh;width:44vw"></ChinaMap>
                            </div>
                            <div>
                                <div class="today-overview-haed">
                                    <div class="img-box"><img src="../../assets/largeScreen/circle@2x.png" alt=""
                                            class="today-img"></div>
                                    <el-row>
                                        <el-col :span="6">
                                            <div class="today-overview-haed-txt" style="min-width:120px">财务概况</div>
                                        </el-col>
                                        <el-col :span="18">
                                            <div class="router-box"><img src="../../assets/largeScreen/route@2x.png" alt=""
                                                    class="router-img"></div>
                                        </el-col>
                                    </el-row>
                                </div>

                                <div class="publish-Region">
                                    <div class="publish-Region-btn">
                                        <div class="publish-Region-txt" @click="getfinanceDate(1)"
                                            :class="financeDate == 1 ? 'financeDateClass' : ''">
                                            近期
                                        </div>
                                        <div class="publish-Region-txt" @click="getfinanceDate(2)"
                                            :class="financeDate == 2 ? 'financeDateClass' : ''">
                                            近一年
                                        </div>
                                    </div>
                                    <div id="financeChart"></div>
                                </div>
                            </div>

                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="body-right">
                            <div class="body-right-box">
                                <div class="today-overview-haed">
                                    <div class="img-box"><img src="../../assets/largeScreen/circle@2x.png" alt=""
                                            class="today-img"></div>
                                    <el-row>
                                        <el-col :span="6">
                                            <div class="today-overview-haed-txt" style="min-width:120px">车辆概况</div>
                                        </el-col>
                                        <el-col :span="18">
                                            <div class="router-box"><img src="../../assets/largeScreen/route@2x.png" alt=""
                                                    class="router-img"></div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="body-right-car">
                                    <div>
                                        <div class="body-right-car-border">
                                            <span>用车中：</span>
                                            <span class="body-right-car-num">69</span>
                                        </div>
                                        <div class="body-right-car-border">
                                            <span>已下线：</span>
                                            <span class="body-right-car-num">69</span>
                                        </div>
                                        <div class="body-right-car-border" style="margin-bottom:1vh">
                                            <span>维修保养：</span>
                                            <span class="body-right-car-num">69</span>
                                        </div>
                                    </div>
                                    <div class="body-right-car-all">
                                        <div>全部</div>
                                        <div class="body-right-all-num">100</div>
                                    </div>
                                    <div>
                                        <div class="body-right-car-border">
                                            <span>商业险到期：</span>
                                            <span class="body-right-car-num">69</span>
                                        </div>
                                        <div class="body-right-car-border">
                                            <span>交强险到期：</span>
                                            <span class="body-right-car-num">69</span>
                                        </div>
                                        <div class="body-right-car-border" style="margin-bottom:1vh">
                                            <span>年检到期：</span>
                                            <span class="body-right-car-num">69</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="body-right-box">
                                <div class="today-overview-haed">
                                    <div class="img-box"><img src="../../assets/largeScreen/circle@2x.png" alt=""
                                            class="today-img"></div>
                                    <el-row>
                                        <el-col :span="6">
                                            <div class="today-overview-haed-txt" style="min-width:120px">违章概括</div>
                                        </el-col>
                                        <el-col :span="18">
                                            <div class="router-box"><img src="../../assets/largeScreen/route@2x.png" alt=""
                                                    class="router-img"></div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="today-overview-regulations">
                                    <div class="today-overview-regulations-box">
                                        <div class="today-box">
                                            <div class="today-box-txt">未处理车辆</div>
                                            <div class="today-box-num">100</div>
                                        </div>
                                        <div class="today-box">
                                            <div class="today-box-txt">未处理违章</div>
                                            <div class="today-box-num">60</div>
                                        </div>
                                    </div>
                                    <div class="today-overview-regulations-box">
                                        <div class="today-box">
                                            <div class="today-box-txt">未处理罚款</div>
                                            <div class="today-box-num">100</div>
                                        </div>
                                        <div class="today-box">
                                            <div class="today-box-txt">未处理扣分</div>
                                            <div class="today-box-num">60</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="body-right-box">
                                <div class="today-overview-haed">
                                    <div class="img-box"><img src="../../assets/largeScreen/circle@2x.png" alt=""
                                            class="today-img"></div>
                                    <el-row>
                                        <el-col :span="6">
                                            <div class="today-overview-haed-txt" style="min-width:120px">告警监控</div>
                                        </el-col>
                                        <el-col :span="18">
                                            <div class="router-box"><img src="../../assets/largeScreen/route@2x.png" alt=""
                                                    class="router-img"></div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="alert-box">
                                    <el-row>
                                        <el-col :span="6" v-for="(item, index) in alertData" :key="index">
                                            <div class="alert-box-value">
                                                <div class="alert-box-value-num">{{ item.num }}</div>
                                                <div class="alert-box-value-text">{{ item.text }}</div>
                                            </div>
                                        </el-col>
                                    </el-row>

                                </div>
                            </div>
                            <div class="ailyRent-body">
                                <img :src="dailMaintenanceImg" alt="" class="orderCardBorder-img">
                                <div class="ailyRent-body-head">
                                    <el-row style="width: 100%;">
                                        <el-col :span="12" class="ailyRent-body-head-left">
                                            <div @click="dailMaintenance(1)"
                                                :class="dailOrderType == 1 ? 'ailyRent-body-head-color' : ''">维保数据</div>
                                        </el-col>
                                        <el-col :span="12" class="ailyRent-body-head-right">
                                            <div @click="dailMaintenance(2)"
                                                :class="dailOrderType == 2 ? 'ailyRent-body-head-color' : ''">告警数据</div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <vue-seamless-scroll :data="listData1" class="warp" :class-option="classOption">
                                    <div v-for="(item, index) in listData1" :key="index" class="warp-li1">
                                        <div :class="item.className ? 'dailyRentalOrder' : ''" class="warp-li-box"></div>
                                        <div class="warp-li-txt1 color1" v-if="item.text == '商业险即将到期'">{{ item.text }}</div>
                                        <div class="warp-li-txt1 color2" v-if="item.text == '年检即将到期'">{{ item.text }}</div>
                                        <div class="warp-li-txt1 color6" v-if="item.text == '交强险即将到期'">{{ item.text }}</div>
                                        <div class="warp-li-value" v-text="item.title"></div>
                                        <div class="warp-li-value" v-text="item.date"></div>
                                    </div>
                                </vue-seamless-scroll>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>


    </div>
</template>

<script>

//   import { loadBMap } from "../../utils/map.js";
import map from '@/utils/china.geo.json'
import * as echarts from 'echarts'
import moment from "moment"
import vueSeamlessScroll from 'vue-seamless-scroll'
import ChinaMap from '../../components/china/index.vue'
//   import 'echarts/extension/bmap/bmap';

export default {
    data() {
        return {
            myChart: null,
            today: '',
            orderSummary: [
                {
                    num: 100,
                    value: '2小时取车'
                },
                {
                    num: 60,
                    value: '2小时还车'
                },
                {
                    num: 100,
                    value: '今日取车'
                },
                {
                    num: 60,
                    value: '今日还车'
                },
                {
                    num: 10,
                    value: '明日取车'
                },
                {
                    num: 5,
                    value: '明日还车'
                },
                {
                    num: 10,
                    value: '预取未取'
                },
                {
                    num: 5,
                    value: '逾期未还'
                },
            ], // 订单概况
            contract: [
                {
                    text: '带出租方签署',
                    num: 100,
                },
                {
                    text: '待承租方签署',
                    num: 60,
                },
            ], // 合同概况
            listData: [], // 滚动数据
            listData1: [], // 维保数据
            alertData: [], // 告警监控
            classOption: {
                step: 0.5
            }, // 滚动速度
            dailOrderImg: require('../../assets/largeScreen/orderCardBorder.png'), // 滚动默认底图
            dailOrderType: 1, // 订单滚动类型
            dailMaintenanceType: 1, // 维保滚动类型
            dailMaintenanceImg: require('../../assets/largeScreen/orderCardBorder.png'), // 滚动默认底图
            financeDate: 1, // 财务概况时间切换
        }
    },
    components: {
        vueSeamlessScroll,
        ChinaMap
    },
    mounted() {
        let time1 = new Date().getDay()
        let time2 = moment().format('YYYY-MM-DD')
        let time3 = this.getWeek(time1)
        this.today = `${time2}`
        // this.init(); // 地图
        this.charts() // 柱状图
        this.rotateImage()
        this.getDailyRentalOrder()
        this.getMaintenance()
        this.getalertData()
    },
    watch: {

    },
    methods: {
        // 获取财务概况
        getfinanceDate(info) {
            if (info === 1) {
                this.financeDate = 1
            } else {
                this.financeDate = 2
            }
        },
        // 告警监控
        getalertData() {
            this.alertData = [
                {
                    num: 100,
                    text: '断电',
                },
                {
                    num: 100,
                    text: '低电',
                },
                {
                    num: 100,
                    text: '停留',
                },
                {
                    num: 100,
                    text: '离线',
                },
                {
                    num: 100,
                    text: '拆卸',
                },
                {
                    num: 100,
                    text: '驶入围栏',
                },
                {
                    num: 100,
                    text: '驶出围栏',
                },
            ]
        },
        // 日租订单-车务排班切换
        dailOrder(info) {
            this.dailOrderType = info
            if (info == 1) {
                console.log(2222)
                this.dailOrderImg = require('../../assets/largeScreen/orderCardBorder.png')
            } else if (info == 2) {
                console.log(111111111)
                this.dailOrderImg = require('../../assets/largeScreen/orderCardBorder2.png')
            }
        },
        dailMaintenance(info) {
            this.dailMaintenanceType = info
            if (info == 1) {
                console.log(2222)
                this.dailMaintenanceImg = require('../../assets/largeScreen/orderCardBorder.png')
            } else if (info == 2) {
                console.log(111111111)
                this.dailMaintenanceImg = require('../../assets/largeScreen/orderCardBorder2.png')
            }
        },
        // 获取维保数据
        getMaintenance() {
            this.listData1 = [{
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "商业险即将到期"
            }, {
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "年检即将到期"
            }, {
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "交强险即将到期"
            }, {
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "商业险即将到期"
            }, {
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "年检即将到期"
            }, {
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "交强险即将到期"
            }, {
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "商业险即将到期"
            }, {
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "年检即将到期"
            }, {
                'title': '陕A888888',
                'date': '2017-12-16到期',
                'text': "交强险即将到期"
            },]
            this.listData.map((res, index) => {
                if (index % 2 !== 0) {
                    res.className = true
                } else {
                    res.className = false
                }
            })
        },
        // 获取日租订单和车务排班
        getDailyRentalOrder() {
            this.listData = [{
                'title': '客户哈皮13398764657预约宝马SUV预计',
                'date': '2017-12-16取车',
                'text': "携程"
            }, {
                'title': '客户王二狗12222222233预约哈雷预计',
                'date': '2017-12-16取车',
                'text': "后台"
            }, {
                'title': '客户君莫笑1888888888预约川崎H5预计',
                'date': '2017-12-16取车',
                'text': "客户端"
            }, {
                'title': '客户君书言19999999999预约杜卡迪VS4预计',
                'date': '2017-12-16取车',
                'text': "管理端"
            }, {
                'title': '客户吕布177777777777预约赤兔Plus预计',
                'date': '2017-12-16取车',
                'text': "客户端"
            }, {
                'title': '客户太上老君10000000000预约青牛预计',
                'date': '2017-12-16取车',
                'text': "客户端"
            }, {
                'title': '客户吕布177777777777预约赤兔Plus预计',
                'date': '2017-12-16',
                'text': "客户端"
            }, {
                'title': '客户君书言19999999999预约杜卡迪VS4预计',
                'date': '2017-12-16',
                'text': "客户端"
            }, {
                'title': '客户君莫笑1888888888预约川崎H5预计',
                'date': '2017-12-16',
                'text': "客户端"
            }, {
                'title': '客户石昊1333424224预约金翅大鹏预计',
                'date': '2017-12-16取车',
                'text': "客户端"
            },]
            this.listData.map((res, index) => {
                if (index % 2 !== 0) {
                    res.className = true
                } else {
                    res.className = false
                }
            })
        },
        // 图片自己旋转
        rotateImage() {
            let spinner = this.$refs.imgRotate
            console.log(spinner)
            let deg = 0
            setInterval(() => {
                deg += 1
                spinner.style.transform = 'rotate(' + deg + 'deg)'
            }, 10)
        },
        getWeek(date) { // 参数时间戳
            switch (date) {
                case 1:
                    return '周一'
                case 2:
                    return '周二'
                case 3:
                    return '周三'
                case 4:
                    return '周四'
                case 5:
                    return '周五'
                case 6:
                    return '周六'
                case 0:
                    return '周日'
            }
        },
        // 地图
        init() {
            if (this.myChart !== null && this.myChart !== '' && this.myChart !== undefined) {
                this.myChart.dispose()
            }
            // window.addEventListener('resize', this.init())
            this.myChart = echarts.init(this.$refs.mapCharts, "macarons")
            echarts.registerMap('china', map)
            // var maxData = this.mentionAreaList[0].value
            // console.log(data);
            // console.log(toolTipData);

            var option = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    backgroundColor: 'transparent',
                    padding: [0, 0, 0, 0],
                    className: 'custom-tooltip',
                    borderWidth: 0,
                    formatter: function (params) {
                        // console.log(params);
                        var str = `<div style = " color:#fff;background-color:none;position: relative;">
                        <img src='${require("../../assets/largeScreen/mapAleart.png")}' style="width:200px;height:250px;display: inline-block;position: absolute;top:0;left:0"></img>
                        <div style="width:200px;height:250px;padding:15px 10px;font-size:12px;position: absolute;top:0px;left:0;z-index:2">
                            <div style='margin:3px 10px;text-align:center;font-size:14px'>
                                <div style='float:left'>山A888888</div>  
                                <div style='float:right'>用车中</div>
                            </div>
                            <div style='margin:3px 10px;margin-top:8px'>车系：宝马</div>
                            <div style='margin:3px 10px;'>车型：SUV</div>
                            <div style='margin:3px 10px;'>姓名：王益</div>
                            <div style='margin:3px 10px;'>手机号：157368236868</div>
                            <div style='background: rgba(0,20,29,0.27);margin:5px 10px;text-align:center;border-radius:5px'>交强险2021-11-11到期</div>
                            <div style='background: rgba(0,20,29,0.27);margin:5px 10px;text-align:center;border-radius:5px'>设备脱离告警</div>
                            <div style='background: rgba(0,20,29,0.27);margin:5px 10px;text-align:center;border-radius:5px'>车辆维保中</div>
                        </div>

                    </div>`
                        return str
                    },

                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: { show: true, name: '提及地区' }
                    }
                },
                geo: {
                    map: 'china',
                    zoom: 1.2,
                    label: {
                        normal: {
                            show: true,
                            color: '#fff',
                            fontSize: "8", //省份字体大小
                        },
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#1DA3D4' // 主题色
                        },
                        emphasis: {
                            show: false,
                            areaColor: '#006692', // 鼠标滑过区域颜色
                            label: {
                                show: false, // 鼠标滑过省份名称不显示
                                textStyle: {
                                    color: '#fff',
                                },
                            }
                        }
                    }
                },
                bmap: {
                    center: [104.114129, 37.550339],
                    zoom: 6,
                    roam: true,
                },
                series: [
                    // {
                    //   name: '提及地区',
                    //   type: 'map',
                    //   mapType: 'china',
                    //   roam: true,
                    //   zoom: 1.2,
                    //   label: {
                    //     normal: {
                    //       show: true, // 省份名称
                    //       fontSize: "10", //省份字体大小
                    //       color: "white", //省份字体颜色

                    //     }
                    //   },
                    //   itemStyle: {
                    //   //   color: 'transparent', // 小圆点颜色
                    //     normal: {
                    //       borderWidth: 1, // 边际线大小
                    //       borderColor: '#99baf0', // 边界线颜色
                    //       areaColor: '#141D42' // 默认区域颜色
                    //     },
                    //     emphasis: {
                    //       show: true,
                    //       areaColor: '#122046', // 鼠标滑过区域颜色
                    //       label: {
                    //         show: false, // 鼠标滑过省份名称不显示
                    //         textStyle: {
                    //           color: '#fff',
                    //         },
                    //       }
                    //     }
                    //   },
                    //   select: { // 鼠标点击地图区域
                    //     disabled: true,
                    //     label: {
                    //       show: false // 鼠标点击省份名称不显示
                    //     },
                    //     itemStyle: {
                    //       areaColor: '#FE9030' // 鼠标点击省份颜色设置
                    //     }
                    //   },
                    // //   data: this.mentionAreaList
                    // },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        //要有对应的经纬度才显示，先经度再维度
                        data: [
                            { name: '济南', value: [117, 36.67], warning: 10 },
                            { name: '哈尔滨自定义', value: [126.63, 45.75], warning: 20 }
                        ],
                        showEffectOn: 'render',
                        symbolSize(value, params) {
                            // return 0
                            return params.data.warning
                        },
                        rippleEffect: {
                            scale: 4, // 波纹的最大缩放比例
                            brushType: 'stroke'
                        },
                        itemStyle: {
                            normal: {
                                color: '#32cd32',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#f4e925' // 高亮颜色
                            }
                        },
                        zlevel: 1
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        //要有对应的经纬度才显示，先经度再维度
                        data: [
                            { name: '宝马', value: [118, 36.67], warning: 10 },
                            { name: '比亚迪', value: [126.63, 46.75], warning: 20 }
                        ],
                        showEffectOn: 'render',
                        symbolSize(value, params) {

                            // return 0
                            return params.data.warning
                        },
                        rippleEffect: {
                            scale: 4, // 波纹的最大缩放比例
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) { //标签内容
                                    return params.name;
                                },
                                lineHeight: 15,
                                backgroundColor: 'rgba(255,255,255,.9)',
                                borderColor: '#80cffd',
                                borderWidth: '1',
                                padding: [2, 2, 2, 2],
                                color: '#000000',
                                fontSize: 10,
                                borderRadius: '15',
                                fontWeight: 'normal',
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#32cd32',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#f4e925' // 高亮颜色
                            }
                        },
                        zlevel: 1
                    },
                ]
            }
            // 绘制图表
            this.myChart.clear()
            this.myChart.resize()
            this.myChart.setOption(option)
        },
        // 柱状图
        charts() {
            const myChart = echarts.init(document.getElementById('financeChart'));
            var option;
            var that = this
            option = {
                tooltip: {
                    trigger: 'axis', // 坐标轴触发，应用于柱状图、折线图
                    triggerOn: 'mousemove', // 鼠标移动时触发
                    axisPointer: {
                        type: 'none',
                    },
                    backgroundColor: 'transparent',
                    formatter: function (params) {
                        // console.log(params);
                        var str = `<div style = "background:url( ${require("../../assets/largeScreen/rectangle.png")}) no-repeat center center ;color:#fff;background-color:none">
                                <div>营运收入：300.3030元</div>
                                <div>营运支出：300元</div>
                                <div>借出收入：200元</div>
                                <div>借入支出：300元</div>
                                <div>车辆处置收入：3000元</div>
                                <div>车辆管理支出：600元</div>
                                <div>其他成本支出：4000元</div>
                                <div>总应收：900元</div>
                            </div>`
                        return str
                    },
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '5%'
                },
                // toolbox: {
                //     feature: {
                //     dataView: { show: true, readOnly: false },
                //     magicType: { show: true, type: ['line', 'bar'] },
                //     restore: { show: true },
                //     saveAsImage: { show: true }
                //     }
                // },
                xAxis: [
                    {
                        type: 'category',
                        data: ['07-20', '07-21', '07-22', '07-23', '07-24', '07-25', '07-26', '07-27', '07-28', '07-29', '07-30', '07-31'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            interval: 0,//代表显示所有x轴标签显示
                        }

                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'Precipitation',
                        min: 0,
                        show: false,
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: 'Temperature',
                        min: 0,
                        show: false,
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name: 'Evaporation',
                        type: 'bar',
                        barWidth: 12,
                        // tooltip: {
                        //     valueFormatter: function (value) {
                        //     return value + ' ml';
                        //     }
                        // },
                        itemStyle: {
                            //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                            normal: {
                                //柱形图圆角，初始化效果
                                // 第一个值表示顶部的左上角，第二个值表示顶部右上角
                                // 第三个值表示底部左下角，第四个值表示底部右下角
                                barBorderRadius: [4, 4, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#3C6FDD'
                                    },
                                    {
                                        offset: 1,
                                        color: '#61A6F4'
                                    }
                                ])
                            }
                        },
                        data: [
                            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                        ]
                    },
                    {
                        name: 'Temperature',
                        type: 'line',
                        yAxisIndex: 1,
                        // tooltip: {
                        //     valueFormatter: function (value) {
                        //     return value + ' °C';
                        //     }
                        // },
                        lineStyle: { // 设置线条的style等
                            normal: {
                                color: '#FFC02A', // 折线线条颜色:红色
                            },
                        },
                        itemStyle: {
                            // 设置线条上点的颜色（和图例的颜色）
                            normal: {
                                color: '#FFC02A',
                            },
                        },
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },

                ]
            };

            option && myChart.setOption(option);

        },
    }
}
</script>

<style lang="scss" scoped>
.custom-tooltip {
    background: url('../../assets/largeScreen/mapAleart.png') center center no-repeat !important;
}



.dailyRentalOrder {
    background: #01B5DB;
    opacity: 0.1;
    z-index: -1
}

.publish-Region {
    width: 100%;
    position: relative;

    .publish-Region-btn {
        position: absolute;
        right: 1vw;
        top: 1vh;
        display: flex;

        .publish-Region-txt {
            border-radius: 2px 0px 0px 2px;
            opacity: 0.6;
            border: 1px solid #fff;
            font-weight: 400;
            color: #fff;
            padding: 0.5vh 0.5vw;
            font-size: 0.5vw;
            margin-right: 1vw;
            cursor: pointer;
            z-index: 2
        }

        .financeDateClass {
            color: #6CE4FB;
            border: 1px solid #6CE4FB;
        }

    }

    .chart {
        width: 100%;
        height: 67vh;
    }

    #financeChart {
        width: 100%;
        height: 29vh;
    }
}

.box {
    width: 100%;
    height: auto;
    overflow-y: auto;
    background-image: url('../../assets/largeScreen/background@2x.png');

    .box-center {
        margin: 0 10px 10px 10px;
    }

    .head {
        width: 100%;
        height: 63px;
        background-image: url('../../assets/largeScreen/largrScreentHead.png');
        background-size: 100% 63px;
        position: relative;

        .head-name {
            width: 150px;
            min-width: 96px;
            height: 24px;
            font-size: 1vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            line-height: 24px;
            position: absolute;
            top: 25px;
            left: 2%;
        }

        .head-date {
            width: 196px;
            min-width: 196px;
            height: 3vh;
            font-size: 1vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            line-height: 3vh;
            position: absolute;
            top: 2vh;
            right: 1vw;
            display: flex;
            align-items: center;

            .fullscreen-img {
                width: 1.5vw;
                height: 3vh;
                display: inline-block;
                cursor: pointer;
            }

            .head-date-text {
                height: 4vh;
                line-height: 4vh;
                min-width: 140px;
            }
        }
    }

    .bodys {
        margin-top: 20px;

        .body-left {
            width: 100%;
            height: 100vh;

            .today-overview {
                width: 100%;
                height: auto;

                .today-overview-haed {
                    width: 100%;
                    height: 44px;
                    ;
                    line-height: 44px;
                    position: relative;

                    .img-box {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    .today-img {
                        display: inline-block;
                        width: 44px;
                        height: 44px;
                    }

                    .today-overview-haed-txt {
                        height: 44px;
                        font-size: 0.9vw;
                        margin-left: 1.2vw;
                        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                        font-weight: 500;
                        color: #50FAFC;
                        line-height: 44px;
                        text-shadow: 0px 2px 2px #050A19;
                    }

                    .router-img {
                        display: inline-block;
                        width: 100%;
                    }

                }

                .today-overview-body {
                    margin-top: 2vh;
                    display: flex;
                    justify-content: space-between;

                    .today-overview-body-left {
                        background-image: url('../../assets/largeScreen/rentalRate.png');
                        background-size: 100% 100%;
                        height: 17vh;
                        width: 100%;
                        position: relative;

                        .circularRotation-box {
                            position: absolute;
                            width: 4vw;
                            height: 4vw;
                            left: 1.5vw;

                            .circularRotation-img {
                                display: inline-block;
                                width: 100%;
                                height: 100%;
                                transform: rotate(0deg);
                            }
                        }

                        .circularRotation-txt {
                            position: absolute;
                            left: 2.4vw;
                            bottom: 3vh;
                            font-size: 0.8vw;
                            font-weight: 400;
                            color: #FFFFFF;

                        }

                        .circularRotation-value {
                            position: absolute;
                            left: 2.2vw;
                            top: 3.2vh;
                            font-size: 1vw;
                            font-weight: 400;
                            color: #FFFFFF;

                        }
                    }

                    .today-overview-body-right {
                        margin-left: 1.5vw;

                        .today-overview-body-top {
                            display: flex;
                            margin-bottom: 1vh;

                            .lease-img {
                                display: inline-block;
                                width: 3vw;
                                height: 7vh;
                            }

                            .lease-box {
                                height: 2.5vh;
                                line-height: 2.5vh;
                                width: 100%;

                                .lease-box-tit {
                                    width: 100%;
                                    height: 2.5vh;
                                    line-height: 2.5vh;

                                    .lease-box-tit-tet {
                                        font-size: 0.4vw;
                                        font-weight: 400;
                                        color: #43EDD6;
                                        margin-left: 1.5vw;
                                    }

                                    .car {
                                        color: #FF9600
                                    }

                                    .lease-box-tit-value {
                                        font-size: 1.1vw;
                                        font-weight: bold;
                                        color: #FFFFFF;
                                        margin-left: 1vw;
                                    }
                                }

                                .lease-box-body {
                                    width: 100%;
                                    height: 2vh;
                                    line-height: 2vh;

                                    .lease-box-body-img {
                                        display: inline-block;
                                        width: 10vw;
                                        height: 1vh;
                                        margin-left: 0.5vw;
                                    }
                                }
                            }
                        }

                    }

                }

                .contract-body {
                    width: 100%;
                    height: 7vh;
                    line-height: 20vh;
                    display: flex;
                    justify-content: space-around;
                    margin-top: 2vh;

                    .contract-body-box {
                        width: 10vw;
                        height: 7vh;
                        position: relative;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        cursor: pointer;

                        .contract-img {
                            width: 100%;
                            height: 100%;
                            display: inline-block;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }


                        .contract-body-num {
                            height: 7vh;
                            line-height: 7vh;
                            color: #C3CDE5;
                            margin-right: 1vw;
                            min-width: 96px;
                        }

                        .contract-body-txt {
                            color: #6EE8FF;
                            height: 7vh;
                            line-height: 7vh;
                            font-size: 1.5vw;
                        }
                    }

                }

                .oeder-body {
                    width: 96%;
                    height: 18vh;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    margin-left: 1vw;
                    margin-top: 2vh;

                    .oeder-body-box {
                        width: 5vw;
                        height: 8vh;
                        margin-bottom: 1vh;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        position: relative;
                        cursor: pointer;

                        .oeder-body-img {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;

                            .rderBox-img {
                                display: inline-block;
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .oeder-body-num {
                            color: #6EE8FF;
                            font-size: 1.5vw;
                            margin-bottom: 1vh;
                        }

                        .oeder-body-txt {
                            color: #C3CDE5
                        }
                    }
                }

            }

            .ailyRent-body {
                width: 98%;
                height: 34vh;
                background-image: url('../../assets/largeScreen/orderBoder.png');
                background-size: 100% 34vh;
                margin-bottom: 5vh;
                position: relative;

                .ailyRent-body-head {
                    height: 7.5vh;
                    margin-top: 2vh;
                    display: flex;
                    color: #fff;
                    font-size: 1vw;
                    line-height: 7.5vh;
                    text-align: center;

                    .ailyRent-body-head-color {
                        color: #6CE4FB;
                    }

                    .ailyRent-body-head-left {
                        cursor: pointer;
                    }

                    .ailyRent-body-head-right {
                        cursor: pointer;
                    }
                }

                .orderCardBorder-img {
                    display: inline-block;
                    position: absolute;
                    top: 2vh;
                    left: 0.8vw;
                    height: 30vh;
                    width: 20vw;
                }

                .warp {
                    height: 24vh;
                    width: 19vw;
                    margin: 0 auto;
                    overflow: hidden;

                    .warp-li {
                        display: flex;
                        width: 100%;
                        height: 5vh;
                        align-items: center;
                        position: relative;

                        .warp-li-box {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                        }

                        .warp-li-txt {
                            display: inline-block;
                            padding: 5px;
                            font-size: 1vw;
                            width: 5vw;
                            min-width: 96px;
                            text-align: center;
                            margin-right: 0.5vw;
                            color: #fff;
                            height: 4vh
                        }

                        .warp-li-value {
                            color: #fff;
                        }

                      .color1 {
                        background: rgba(12, 41, 70, 0.5);
                        border-radius: 4px;
                        border: 1px solid #3399FF;
                        font-size: 16px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #D4E5FF;
                        line-height: 24px;
                        text-shadow: 0px 0px 4px #1A436C;
                        background: linear-gradient(180deg, #CDEEFF 0%, #3399FF 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      }

                      .color2 {
                        background: rgba(28, 75, 77, 0.5);
                        border-radius: 4px;
                        border: 1px solid #2BA78E;
                        font-size: 16px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #D4E5FF;
                        line-height: 24px;
                        text-shadow: 0px 0px 6px rgba(0,255,238,0.5);
                        background: linear-gradient(180deg, #DAFFF8 0%, #1EF4E0 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      }

                      .color3 {
                        background: rgba(89, 26, 27, 0.5);
                        border-radius: 4px;
                        border: 1px solid #FF4D4F;
                        font-size: 16px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #D4E5FF;
                        line-height: 24px;
                        text-shadow: 0px 0px 4px rgba(255,77,79,0.51);
                        background: linear-gradient(180deg, #FFE8E7 0%, #FF4D4F 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      }

                      .color4 {
                        background: rgba(116, 78, 24, 0.5);
                        border-radius: 4px;
                        border: 1px solid #FF9600;
                        font-size: 16px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #D4E5FF;
                        line-height: 24px;
                        text-shadow: 0px 0px 4px #A46305;
                        background: linear-gradient(180deg, #FFEBCF 0%, #D08419 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      }

                      .color5 {
                        background: rgba(13, 103, 73, 0.51);
                        border-radius: 4px;
                        border: 1px solid #18E29F;
                        font-size: 16px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #D4E5FF;
                        line-height: 24px;
                        text-shadow: 0px 0px 4px rgba(24,226,159,0.5);
                        background: linear-gradient(180deg, #D6FFF1 0%, #18E29F 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      }
                    }

                }
            }

        }

        .body-center-head {
            width: 100%;
            height: 10vh;
            display: flex;
            justify-content: center;

            .body-center-head-box {
                width: 94%;
                height: 8vh;
                display: flex;
                justify-content: space-between;

                .head-box {
                    display: flex;
                    align-items: center;
                    height: 8vh;
                    width: 50%;
                    cursor: pointer;

                    .receivable-img {
                        display: inline-block;
                        width: 7vw;
                        height: 9vh;
                    }

                    .head-box-text {
                        height: 6vh;

                        .head-box-text-txt {
                            font-weight: 400;
                            color: #6EE8FF;
                            line-height: 3vh;
                            text-align: center;
                            font-size: 0.8vw;
                        }

                        .head-box-text-num {
                            font-size: 1.2vw;
                            font-weight: bold;
                            color: #FFAF2C;
                            line-height: 3vh;
                            text-align: center;
                        }
                    }
                }

                .box2 {
                    display: flex;
                    justify-content: flex-end
                }
            }
        }

        .body-center {
            .today-overview-haed {
                width: 100%;
                height: 44px;
                ;
                line-height: 44px;
                position: relative;

                .img-box {
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                .today-img {
                    display: inline-block;
                    width: 44px;
                    height: 44px;
                }

                .today-overview-haed-txt {
                    height: 44px;
                    font-size: 0.9vw;
                    margin-left: 1.2vw;
                    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                    font-weight: 500;
                    color: #50FAFC;
                    line-height: 44px;
                    text-shadow: 0px 2px 2px #050A19;
                }

                .router-img {
                    display: inline-block;
                    width: 100%;
                }

            }
        }

        .body-right {
            .body-right-box {
                width: 100%;
                height: auto;

                .today-overview-haed {
                    width: 100%;
                    height: 44px;
                    ;
                    line-height: 44px;
                    position: relative;

                    .img-box {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    .today-img {
                        display: inline-block;
                        width: 44px;
                        height: 44px;
                    }

                    .today-overview-haed-txt {
                        height: 44px;
                        font-size: 0.9vw;
                        margin-left: 1.2vw;
                        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                        font-weight: 500;
                        color: #50FAFC;
                        line-height: 44px;
                        text-shadow: 0px 2px 2px #050A19;
                    }

                    .router-img {
                        display: inline-block;
                        width: 100%;
                    }

                }

                .body-right-car {
                    display: flex;
                    justify-content: space-between;
                    margin: 1vw 1vw 0vw 1vw;

                    .body-right-car-border {
                        box-shadow: inset 0px 0px 11px 0px rgba(143, 239, 252, 0.5);
                        border-radius: 3px;
                        border: 1px solid #2EA8D0;
                        padding: 1vh 0.5vw;
                        margin-bottom: 1vh;
                        color: #C3CDE5;
                        font-size: 0.8vw;
                        cursor: pointer;

                        .body-right-car-num {
                            color: #b5e9f3;
                            font-size: 1vw;
                            font-weight: bold;
                        }
                    }

                    .body-right-car-all {
                        width: 6vw;
                        height: 16vh;
                        background-image: url('../../assets/largeScreen/carBoder1.png');
                        background-size: 6vw 18vh;
                        color: #C3CDE5;
                        font-size: 0.8vw;
                        text-align: center;
                        padding-top: 10%;
                        cursor: pointer;

                        .body-right-all-num {
                            color: #6EE8FF;
                            font-size: 1.2vw;
                            margin-top: 1vh;
                            font-weight: bold;
                        }
                    }
                }

                .today-overview-regulations {
                    width: 19vw;
                    height: 16vh;
                    margin: 1.5vh 2vw;
                    background-image: url('../../assets/largeScreen/shizi.png');
                    background-size: 19vw 16vh;

                    .today-overview-regulations-box {
                        width: 100%;
                        height: 50%;
                        display: flex;

                        .today-box {
                            width: 50%;
                            height: 50%;
                            text-align: center;
                            color: #C3CDE5;
                            font-size: 0.8vw;
                            cursor: pointer;

                            .today-box-txt {
                                margin-top: 0.7vh;
                            }

                            .today-box-num {
                                margin-top: 1vh;
                                font-size: 1.5vw;
                                font-weight: bold
                            }
                        }
                    }
                }

                .alert-box {
                    width: 88%;
                    height: 17vh;
                    margin: 1vh 2vw;

                    .alert-box-value {
                        width: 88%;
                        height: 8vh;
                        box-shadow: inset 0px 0px 10px 0px rgba(32, 220, 236, 0.4);
                        border-radius: 4px;
                        text-align: center;
                        padding-top: 1vh;
                        margin: 0 0.5vw 0.5vw 0;
                        cursor: pointer;

                        .alert-box-value-num {
                            font-size: 1.5vw;
                            font-weight: bold;
                            color: #6EE8FF;
                        }

                        .alert-box-value-text {
                            font-size: 0.8vw;
                            color: #C3CDE5;
                        }
                    }
                }
            }

            .ailyRent-body {
                width: 100%;
                height: 26vh;
                background-image: url('../../assets/largeScreen/orderBoder.png');
                background-size: 100% 26vh;
                margin-bottom: 5vh;
                position: relative;

                .ailyRent-body-head {
                    height: 7.5vh;
                    margin-top: 2vh;
                    display: flex;
                    color: #fff;
                    font-size: 1vw;
                    line-height: 7.5vh;
                    text-align: center;

                    .ailyRent-body-head-color {
                        color: #6CE4FB;
                    }

                    .ailyRent-body-head-left {
                        cursor: pointer;
                    }

                    .ailyRent-body-head-right {
                        cursor: pointer;
                    }
                }

                .orderCardBorder-img {
                    display: inline-block;
                    position: absolute;
                    top: 2vh;
                    left: 0.8vw;
                    height: 23vh;
                    width: 21vw;
                }

                .warp {
                    height: 17vh;
                    width: 20vw;
                    margin: 0 auto;
                    overflow: hidden;

                    .warp-li1 {
                        display: flex;
                        width: 100%;
                        height: 5vh;
                        align-items: center;
                        justify-content: space-between;
                        position: relative;
                        padding: 0 1vw 0 0.2vw;

                        .warp-li-box {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                        }

                        .warp-li-txt1 {
                            display: inline-block;
                            padding: 5px;
                            font-size: 1vw;
                            width: 8vw;
                            min-width: 96px;
                            text-align: center;
                            margin-right: 0.5vw;
                            color: #fff;
                            height: 4vh
                        }

                        .warp-li-value {
                            color: #fff;
                        }

                      .color1 {
                        background: rgba(12, 41, 70, 0.5);
                        border-radius: 4px;
                        border: 1px solid #3399FF;
                        font-size: 16px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #D4E5FF;
                        line-height: 24px;
                        text-shadow: 0px 0px 4px #1D6AB6;
                        background: linear-gradient(180deg, #CDEEFF 0%, #3399FF 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      }

                      .color2 {
                        background: rgba(28, 75, 77, 0.5);
                        border-radius: 4px;
                        border: 1px solid #2BA78E;
                        font-size: 16px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #D4E5FF;
                        line-height: 24px;
                        text-shadow: 0px 0px 4px rgba(1, 255, 238, 0.5);
                        background: linear-gradient(180deg, #DAFFF8 0%, #1EF4E0 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      }

                      .color3 {
                        color: #FF4D4F;
                        background: rgba(89, 26, 27, 0.5);
                        border-radius: 4px;
                        border: 1px solid #FF4D4F
                      }

                      .color4 {
                        color: #FF9600;
                        background: rgba(116, 78, 24, 0.5);
                        border-radius: 4px;
                        border: 1px solid #FF9600
                      }

                      .color5 {
                        color: #D4E5FF;
                        background: rgba(13, 103, 73, 0.5);
                        border-radius: 4px;
                        border: 1px solid #18E29F;
                      }

                      .color6 {
                        color: #FF7C4D;
                        background: rgba(89, 43, 26, 0.5);
                        border-radius: 4px;
                        border: 1px solid #FF764D;
                        font-size: 16px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #D4E5FF;
                        line-height: 24px;
                        text-shadow: 0px 0px 4px rgba(255, 124, 77, 0.51);
                        background: linear-gradient(180deg, #FFEEE7 0%, #FF784D 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      }
                    }

                }
            }

        }

    }

}
</style>
